<template>
<div class="rightBottom">
    <!-- 定义的容器 -->
    <div id="rightMidBottom" style="width: 5.5rem;height: 2.75rem"></div>
  </div>
</template>

<script>
export default {
  name: "rightMidBottom",
  mounted() {
    this.getdata();
  },
  data() {
    return {
      charts: "",
      opinionData: [],
    };
  },
  methods: {
    SetEchart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("rightMidBottom"));
      // 绘制图表
      // let test ={"2020-12-08": [1, 0, 1, 0], "2020-12-10": [9, 4, 8, 4], "2020-12-11": [11, 4, 2, 0], "2020-12-14": [13, 8, 2, 4],
      //     "2020-12-17": [15, 8, 2, 0], "2020-12-18": [15, 9, 0, 1], "2020-12-22": [15, 10, 0, 1], "2020-12-24": [17, 11, 2, 1],
      //     "2020-12-28": [18, 11, 1, 0], "2021-01-06": [19, 12, 1, 1], "2021-01-07": [20, 12, 1, 0], "2021-01-12": [21, 12, 1, 0],
      //     "2021-01-26": [39, 12, 18, 0], "2021-01-27": [41, 12, 2, 0], "2021-01-28": [42, 15, 1, 3], "2021-02-01": [58, 20, 16, 5],
      //     "2021-02-02": [58, 24, 0, 4], "2021-02-03": [78, 24, 20, 0], "2021-02-04": [99, 40, 21, 16], "2021-02-05": [99, 52, 0, 12],
      //     "2021-02-06": [100, 52, 1, 0], "2021-02-07": [105, 54, 5, 2], "2021-02-08": [106, 61, 1, 7], "2021-02-19": [106, 72, 0, 11],
      //     "2021-02-20": [111, 91, 5, 19], "2021-02-22": [119, 92, 8, 1], "2021-02-23": [149, 93, 30, 1], "2021-02-24": [155, 98, 6, 5],
      //     "2021-02-25": [157, 104, 2, 6], "2021-02-26": [160, 116, 3, 12], "2021-03-01": [173, 122, 13, 6], "2021-03-02": [175, 122, 2, 0],
      //     "2021-03-03": [183, 125, 8, 3], "2021-03-04": [184, 126, 1, 1], "2021-03-05": [186, 132, 2, 6], "2021-03-08": [188, 144, 2, 12],
      //     "2021-03-09": [190, 145, 2, 1], "2021-03-10": [192, 149, 2, 4], "2021-03-11": [196, 159, 4, 10], "2021-03-12": [199, 163, 3, 4],
      //     "2021-03-15": [200, 171, 1, 8], "2021-03-16": [201, 172, 1, 1], "2021-03-17": [203, 177, 2, 5], "2021-03-18": [205, 183, 2, 6],
      //     "2021-03-19": [207, 184, 2, 1], "2021-03-22": [211, 185, 4, 1], "2021-03-23": [216, 189, 5, 4], "2021-03-24": [219, 191, 3, 2],
      //     "2021-03-25": [221, 200, 2, 9], "2021-03-26": [222, 200, 1, 0], "2021-03-29": [222, 201, 0, 1], "2021-03-30": [227, 204, 5, 3],
      //     "2021-03-31": [228, 209, 1, 5], "2021-04-01": [228, 211, 0, 2], "2021-04-02": [228, 212, 0, 1], "2021-04-06": [228, 214, 0, 2]}
      let test = this.opinionData
      let allAdd = []
      let dayAdd = []
      let allResolve = []
      let dayResolve = []
      let name = []
      for(var key in test) {
        name.push(key.substring(key.length-5,key.length));             //属性名（key）
        // console.log(name);
        allAdd.push(test[key][0]);       //属性值（value）
        // console.log(allAdd)
        allResolve.push(test[key][1]);
        dayAdd.push(test[key][2]); 
        dayResolve.push(test[key][3]); 
        }
      var option = {
        // 标题
        title: {
            text: 'Bug趋势图',
            textStyle:{
                color:"#CCFFFF",
                fontSize:this.refontSize(18),
                fontWeight:"bold"
            }
        },
        // 提示
        tooltip: {
            trigger: 'axis'
        },
        //图标头
        legend: {
            data: ['总提交', '总解决', '日提交', '日解决'],
            textStyle:{
              color:'#CCFFFF',
              fontSize:this.refontSize(14),
              },
            padding:[30,0,0,0]
        },
        // 周边间距
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        // X轴设置
        xAxis: {
            type: 'category',
          // name:"日期",
          // nameLocation:"start",
            // boundaryGap: false,
            data: name,
            axisLine:{
              lineStyle:{
                color:"#CCFFFF",
              }
            },
            axisLabel:{
              color:"#CCFFFF",
              rotate:45,
              fontSize:this.refontSize(14),
              },
            splitLine:{
              show:false
            }
        },
        // Y轴设置
        yAxis: [{
          type: 'value',
          // name:"个",
          // nameLocation:"end",
          // offset:10,
          position: 'left',
          splitNumber:3,
          splitLine:{
            show:false
          },
          axisLabel:{
            // color:"#CCFFFF",
            fontSize:this.refontSize(14),
            formatter:'{value}个'
          },

          axisLine: {
                show: true,
                lineStyle: {
                    color: '#D87093',
                }
            },
        },
        {
          type: 'value',
          position: 'right',
          splitNumber:3,
          splitLine:{
            show:false
          },
          axisLabel:{
            // color:"#CCFFFF",
            fontSize:this.refontSize(14),
            formatter:'{value}个'
          },
          axisLine: {
                show: true,
                lineStyle: {
                    color: '#0099CC'
                }
            },
        }
        ],
        // 数据
        series: [
            {
              name: '总提交',
              type: 'line',
              stack: '总提交',
              color: '#CC0033',
              data: allAdd,
              symbol: 'none',
            },
            {
              name: '总解决',
              type: 'line',
              stack: '总解决',
              color: '#FFCCCC',
              data: allResolve,
              symbol: 'none',
            },
            {
                name: '日提交',
                type: 'bar',
                stack: '日提交',
              color: '#0000CC',
                data: dayAdd,
                yAxisIndex: 1,
            },
            {
                name: '日解决',
                type: 'bar',
                stack: '日解决',
              color: '#0099CC',
                data: dayResolve,
                yAxisIndex: 1,
            },

        ]
        }
        myChart.setOption(option);
        },
    // 请求bug趋势数据
    getdata(){
        this.$http({ method: 'get',
                    url: 'show/bugtrend/?system='+this.$route.query.project,}).then(response => {
                    // console.log(response.data);
                    this.opinionData =response.data;
                    this.SetEchart()
                },
                // response => {
                //     console.log("error");
                // }
                );
    }
  }
};
</script>

<style scoped>
</style>